<script setup lang="ts">
import { nextTick, reactive, ref, watch } from 'vue';
import { NButton, NInput, NInputNumber, NPopover, NSelect, NSwitch } from 'naive-ui';
import SvgIcon from '@/components/custom/svg-icon.vue';
import GoodsClassSelector from '@/components/goods/class-selector.vue';
import GoodsBrandSelector from '@/components/goods/brand-selector.vue';
import StockSelector from '@/components/stock/selector.vue';

interface SearchFilters {
  stockId: string;
  stockName: string;
  goodsName: string;
  packModel: string;
  position: string;
  searchText: string;
  brand: string;
  goodsClass: string;
  noReserveDesc: string;
  productNumber: string;
  modlePrice: boolean;
  packingUnitPrice: boolean;
  isStop: boolean;
}

interface Props {
  filters: SearchFilters;
}

interface Emits {
  (e: 'update:filters', value: SearchFilters): void;
  (e: 'search'): void;
  (e: 'reset'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const filterVisible = ref(false);

// 创建本地筛选条件副本
const localFilters = reactive<SearchFilters>({ ...props.filters });

// 监听props变化，同步更新本地数据
watch(
  () => props.filters,
  newFilters => {
    Object.assign(localFilters, newFilters);
  },
  { deep: true, immediate: true }
);

// 库存选择
const handleStockSelect = (stockData: { objectId: string; stockName: string }) => {
  localFilters.stockId = stockData.objectId;
  localFilters.stockName = stockData.stockName;
  handleFilterChange();
};

// 分类选择
const handleClassSelect = (classData: { objectId: string; name: string }) => {
  localFilters.goodsClass = classData.objectId;
  handleFilterChange();
};

// 品牌选择
const handleBrandSelect = (brandData: { name: string }) => {
  localFilters.brand = brandData.name;
  handleFilterChange();
};

// 搜索输入
const handleSearchInput = (value: string) => {
  localFilters.searchText = value;
  handleFilterChange();
};

// 筛选条件变化处理
const handleFilterChange = () => {
  emit('update:filters', { ...localFilters });
};

// 执行搜索
const handleSearch = () => {
  emit('search');
};

// 应用高级筛选
const handleApplyFilter = () => {
  filterVisible.value = false;
  emit('update:filters', { ...localFilters });
  emit('search');
};

// 重置筛选
const handleResetFilter = () => {
  // 重置本地筛选条件
  Object.assign(localFilters, {
    stockId: '',
    stockName: '',
    goodsName: '',
    packModel: '',
    position: '',
    searchText: '',
    brand: '',
    goodsClass: '',
    noReserveDesc: '全部',
    productNumber: '',
    modlePrice: false,
    packingUnitPrice: false,
    isStop: false
  });
  
  // 立即更新到父组件
  emit('update:filters', { ...localFilters });
  
  nextTick(() => {
    emit('reset');
  });
  
  window.$message?.success('筛选条件已重置');
};
</script>

<template>
  <div class="flex items-center gap-3">
    <!-- 库存选择器 -->
    <StockSelector @select="handleStockSelect" />

    <!-- 商品分类选择器 -->
    <GoodsClassSelector @select-class="handleClassSelect" />

    <!-- 品牌选择器 -->
    <GoodsBrandSelector @select="handleBrandSelect" />

    <!-- 搜索框 -->
    <NInput
      :value="localFilters.searchText"
      placeholder="请输入关键词搜索（商品套餐名/编号/规格）"
      class="w-300px"
      clearable
      @input="handleSearchInput"
      @keyup.enter="handleSearch"
    >
      <template #suffix>
        <SvgIcon
          icon="ant-design:search-outlined"
          class="cursor-pointer text-gray-400 hover:text-primary"
          @click="handleSearch"
        />
      </template>
    </NInput>

    <!-- 高级筛选 -->
    <NPopover
      v-model:show="filterVisible"
      placement="bottom-end"
      trigger="click"
      :width="420"
    >
      <template #trigger>
        <NButton>
          <SvgIcon icon="ant-design:filter-outlined" class="mr-1 h-14px w-14px" />
          筛选
        </NButton>
      </template>

      <div class="p-4">
        <div class="mb-4 text-16px font-semibold">高级筛选</div>

        <div class="space-y-4">
          <!-- 套餐名称 -->
          <div>
            <div class="mb-2 text-sm text-gray-600">套餐名称</div>
            <NInput
              v-model:value="localFilters.goodsName"
              placeholder="请输入商品套餐名称"
              clearable
            />
          </div>

          <!-- 编号 -->
          <div>
            <div class="mb-2 text-sm text-gray-600">编号</div>
            <NInput
              v-model:value="localFilters.productNumber"
              placeholder="请输入商品套餐编号"
              clearable
            />
          </div>

          <!-- 规格 -->
          <div>
            <div class="mb-2 text-sm text-gray-600">规格</div>
            <NInput
              v-model:value="localFilters.packModel"
              placeholder="请输入商品套餐规格"
              clearable
            />
          </div>

          <!-- 存放位置 -->
          <div>
            <div class="mb-2 text-sm text-gray-600">存放位置</div>
            <NInput
              v-model:value="localFilters.position"
              placeholder="请输入存放位置"
              clearable
            />
          </div>

          <!-- 是否停用 -->
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-600">是否停用</span>
            <NSwitch v-model:value="localFilters.isStop" />
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="mt-6 flex justify-end gap-3">
          <NButton @click="handleResetFilter">
            重置
          </NButton>
          <NButton type="primary" @click="handleApplyFilter">
            确定
          </NButton>
        </div>
      </div>
    </NPopover>
  </div>
</template>

